<!--组件：按照组织机构统一为用户授权-->
<template>
  <div>
    <a-button @click="openDrawer">统一授权</a-button>

    <a-drawer
      :visible="visible"
      title="统一授权"
      :width="360"
      @before-ok="authorizeDept"
      @cancel="closeDrawer"
    >
      <a-alert title="统一授权" style="margin-bottom: 20px"
        >对选中组织机构下所有人员进行统一角色授权</a-alert
      >
      <a-form
        ref="formRef"
        :model="form"
        layout="vertical"
        :rules="{
          deptId: [{ required: true, message: '请选择组织机构' }],
          roleIds: [{ required: true, message: '请选择角色' }],
        }"
      >
        <a-row :gutter="24">
          <a-col>
            <a-form-item label="组织机构" field="deptId">
              <a-tree-select
                v-model="form.deptId"
                :data="deptTree"
                allow-search
                :field-names="{
                  key: 'id',
                  title: 'name',
                  children: 'children',
                }"
                placeholder="请选择组织"
                style="margin-bottom: 20px"
              />
            </a-form-item>
          </a-col>
          <a-col>
            <a-form-item label="角色" field="roleIds">
              <a-spin :loading="loading">
                <a-checkbox-group
                  v-model:model-value="form.roleIds"
                  direction="vertical"
                >
                  <a-checkbox
                    v-for="item in roleList"
                    :key="item.id"
                    :value="item.id"
                  >
                    {{ item.name }}
                  </a-checkbox>
                </a-checkbox-group>
              </a-spin>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-drawer>
  </div>
</template>

<script setup lang="ts" name="RoleDeptDrawer">
  import { PropType, ref } from 'vue';
  import { TreeNodeData, Message } from '@arco-design/web-vue';
  import { queryRoleRecordList } from '@/api/system/role';
  import { updateUserRoleByDept } from '@/api/system/permission';
  import { RoleRecord } from '@/api/system/model/roleModel';

  defineProps({
    deptTree: { type: Array as PropType<TreeNodeData[]>, default: () => [] },
  });

  const visible = ref<boolean>(false);
  const openDrawer = () => {
    getRoleList();
    visible.value = true;
  };
  const closeDrawer = () => {
    visible.value = false;
    formRef.value.resetFields();
  };

  const generateForm = () => {
    return {
      deptId: '',
      roleIds: [],
    };
  };
  const form = ref(generateForm());
  const formRef = ref<any>();

  const loading = ref<boolean>(false);
  // const checkedKeys = ref<(string | number | boolean)[]>([]);

  const roleList = ref<RoleRecord[]>([]);
  const getRoleList = async () => {
    loading.value = true;
    try {
      const { data } = await queryRoleRecordList();
      roleList.value = data;
    } finally {
      loading.value = false;
    }
  };

  // func：保存授权信息
  const authorizeDept = async (done: (closed: boolean) => void) => {
    const errors = await formRef.value.validate();
    if (!errors) {
      try {
        await updateUserRoleByDept(form.value);
        Message.success('修改成功');
      } finally {
        done(true);
        closeDrawer();
      }
    }
  };
</script>
